<template>
	<div>
		<div class="returnmy">
			<el-button @click="gomy()">返回首页</el-button>
			<h1>请付款:{{this.$route.query.dx.jg}}</h1>
		</div>

		<el-form label-width="80px">
			<el-form-item label="订当号:">
				<el-input v-model="user.ordid"></el-input>
			</el-form-item>
			<el-form-item label="订当总额:">
				<el-input v-model="user.amount"></el-input>
			</el-form-item>
			<el-form-item label="姓名:">
				<el-input v-model="user.ship2name"></el-input>
			</el-form-item>

			<el-form-item label="电话:">
				<el-input v-model="user.ship2phone"></el-input>
			</el-form-item>
			<el-form-item label="地址:">
				<el-input v-model="user.ship2addr"></el-input>
			</el-form-item>
			<el-form-item label="付款状态:">
				<el-button v-show="!judge" style="background-color: orangered;color:white;font-family: KaiTi;"
					@click="fk()">未付款(点击付款)</el-button>
				<el-button v-show="judge" style="font-family: KaiTi;background-color: lightgreen;">已付款</el-button>
			</el-form-item>
		</el-form>
		<div v-for="item in list" class="xq">
			<img :src="`${$ip}/api/public/showimg/${item.book.pic}`" min-width="70" height="70" />
			<h5>书名:{{item.book.name}}</h5>
			<h5>单价:{{item.price}}</h5>
			<h5>数量:{{item.num}}</h5>
			<h5>总价:{{item.price*item.num}}</h5>
			<h5>库存:{{item.book.stock}}</h5>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Mobliedoorder',
		data() {
			return {
				user: {},
				judge: false,
				list: [],
				img: '',
				zj: ''
			}
		},
		methods: {
			fk() {
				this.judge = true;
				this.$postkv('/api/fore/ord/addPay/' + this.user.ordid).then((resp) => {
					console.log(resp.data.data);
				});
				this.$get('/api/fore/ord/findByOrdid/' + this.user.ordid).then((resp) => {
					console.log(resp.data.data);
					this.$message({
						showClose: true,
						message: '付款成功,等待商家发货'
					});
				})
			},
			gomy() {
			this.$router.push('/mobile/home');
			}
		},
		mounted() {
			console.log(100);
			console.log(this.$route.query.dx);
			console.log(this.$route.query.dx.od);
			this.$get('/api/fore/ord/findByOrdid/' + this.$route.query.dx.od).then((resp) => {
				this.user = resp.data.data;
				let k = resp.data.data.items;
				console.log(resp.data.data.items);
				for (let i in k) {
					console.log(k[i]);

					this.list.push(k[i]);
				}
				console.log("提交订当后获取的商品信息" + resp.data.data.book);
				if (resp.data.data.payStatus > 0) {
					this.judge = false;
				}
				console.log(this.list);

			})
		}
	}
</script>

<style>
	.runnow {
		text-align: center;
		font-family: KaiTi;
	}

	.returnmy {
		display: flex;
	}

	.returnmy button {
		position: relative;
		top: -4rem;
		border: none;
	}

	.returnmy h1 {
		position: relative;
		left: 20%;
	}

	.runnow form {
		width: 80%;
		margin-left: 10%;
		margin-top: 5%;

	}

	.xq {
		width: 90%;
		margin: 0 auto;
		background-color: #a6a6a6;
		margin-top: 4rem;
		border-radius: 1.25rem;
	}

	.xq img {
		position: relative;
		left: -13rem;
		top: 4rem;
	}

	.xq h5 {
		position: relative;
		top: -3rem;
		left: 3rem;
	}
</style>